.web {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.yuan {
	width: 200px;
	height: 200px;
	background: skyblue;
	border-radius: 50%;
	/*动画名称*/
	/*animation: yuan 1s forwards 0s alternate;*/
	animation-name: yuan;
	-webkit-animation-name: yuan;
	/*动画时间为1秒*/
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	/*循环两次*/
	/*animation-iteration-count:2 ;*/
}

@keyframes yuan {
	from {
		left: 800px;
	}
	50% {
		left: 400px;
	}
	to {
		left: 500px;
	}
}

@-webkit-keyframes yuan {
	from {
		left: 800px;
	}
	to {
		left: 500px;
	}
}

.square {
	top: 5px;
	margin-left: 200px;
	background: skyblue;
	width: 400px;
	height: 200px;
	animation-name: square;
	-webkit-animation-name: square;
	/*动画播放时间*/
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	/*正方形延迟一秒钟*/
	animation-delay: 1s;
	/*结束时,留在最后那一帧*/
	animation-fill-mode: forwards;
	position: relative;
	transform-origin: right top;
	border-radius: 10%;
	transform: scale(0);
}

@keyframes square {
	from {}
	50% {
		transform: scale(1.2);
		;
	}
	to {
		transform: scale(1);
	}
}

@-webkit-keyframes square {
	from {}
	to {
		transform: scale(1);
	}
}


/*@keyframes square{
	from{width:0px;height:0px;left: 700px;}
	to{width: 500px; height: 500px;border-radius: 10%;left: 200px;}
}
@-webkit-keyframes square{
	from{width:0px;height:0px;left: 700px;}
	to{width: 500px; height: 500px;border-radius: 10%;left: 200px;}
}*/